<template>
    <div class="detail-box">
        <div class="back iconfont" @click="$router.go(-1)"> &#xe675; </div>
        <div class="cart iconfont" @click="$router.push('ShoppingPage')"> &#xe6e6; </div>   
        <div class="contont" ref="contont">
            <div>
                <!-- swiper start -->
                <swiper class="imgs" :options="swiperOption" ref="mySwiper">
                    <swiper-slide v-for="(item, index) in 6" :key="'product'+index">
                        <img :src="sessionData.img">
                    </swiper-slide>
                </swiper>
                <!-- swiper end -->
                <!-- Information start -->
                <div class="main">
                    <div class="price">
                        <span class="newPrice">{{ sessionData.price }}</span>
                        <span class="oldPrice">￥{{ sessionData.orgPrice }}</span>
                    </div>
                    <div class="title">{{ sessionData.title }}</div>
                    <div class="freight">{{ freight }}</div>
                </div>
                <div class="discountpage">
                    <div class="discount">
                        <span class="title">优惠</span>
                        <span class="subtitle">领券后，下单至少减<i>3元</i></span>
                        <span class="link iconfont">领券&#xe677;</span>
                    </div>
                    <div class="coupon">
                        <span class="title">&nbsp;</span>
                        <div class="couponTitle">店铺优惠券</div>
                        <div class="content">满98减3</div>
                        <div class="content">满198减10</div>
                    </div>
                    <div class="promotion">
                        <span class="title">促销</span>
                        <div class="subtitle"><span>满折</span><div>满3件打9.5折，满9件打8.5折</div></div>
                        <span class="link iconfont">更多&#xe677;</span>
                    </div>
                    <div class="information">
                        <div v-for="(v, index) in information" :key="index">
                            <div></div>
                            <span>{{ v }}</span>
                        </div>
                    </div>
                </div>
                <!-- Information end -->
                <!-- comment start -->
                <div class="comment">
                    <div class="title">
                        <div>买家评论333</div>
                        <div class="iconfont">更多&#xe677;</div>
                    </div>
                    <div class="statistics">
                        <span v-for="(v, index) in details.rateTags" :key="index">{{ `${v.property}(${v.num})` }}</span>
                    </div>
                    <div class="message">
                        <comment :list="details.list"></comment>
                    </div>
                </div>
                <!-- comment end -->

            </div>
        </div>
        <shopping-float></shopping-float>
        <details-bottom-bar></details-bottom-bar>
    </div>
</template>

<script>
import BScroll from "better-scroll";
import {swiper, swiperSlide} from "vue-awesome-swiper";
import detailsBottomBar from '../components/DetailsBottomBar';
import comment from '../components/comment';
import shoppingFloat from '../components/ShoppingFloat';

import {mapState,mapMutations,mapActions} from 'vuex';

export default {
    components:{
        detailsBottomBar,
        swiper,
        swiperSlide,
        comment,
        shoppingFloat,        
    },
    computed:{
        ...mapState(["details"]),
    },
    data(){
        return {
            swiperOption: {
                effect: "coverflow",
                slidesPerView: 3,
                centeredSlides: true
            },
            img:'./img/detail-page.png',
            newPrice:29.99,
            oldPrice:42.74,
            title:"尖货直降随新一夏尖货直降随新一夏尖货直降随新一夏尖货直降随新一夏",
            freight:"免运费",
            information:["72小时发货","7天无理由退货","退货补运费"],
            sessionData:{},
        }
    },
    methods:{
        initScroll(){
            setTimeout(()=>{
                new BScroll(this.$refs.contont,{click:true});
            },100);
        },
        ...mapActions(["DetailsLoad"]),
        ...mapMutations(["setDetailsItemId"]),
    },
    mounted(){
        this.initScroll();
        this.sessionData=JSON.parse(sessionStorage.getItem("shopping"));
        this.setDetailsItemId(this.sessionData.tradeItemId);
        this.DetailsLoad();
    }
}
</script>

<style lang="less" scoped>
.detail-box {
    height: 100%;
    position: relative;
    background-color: @ef;
    width: 100%;
    .back,.cart{
        position: absolute;
        width: 62px;
        height: 62px;
        background: rgba(53, 53, 53, 0.7);
        border-radius: 50%;
        text-align: center;
        line-height: 62px;
        font-size: 38px;
        color: @white;
        top:20px;
        z-index: 999;
    }
    .back{
        left: 20px;
    }
    .cart{
        right: 20px;
    }
    .contont{
        width: 100%;
        position: absolute;
        top: 0px;
        bottom: @h;
        .imgs {
            width: 200%;
            transform: translateX(-25%);
            text-align: center;
            white-space: nowrap;
            font-size: 0px;
            box-sizing: border-box;
            img {
                width: 100%;
                object-fit: cover;
                object-position: center;
                padding: 10px;
                box-sizing: border-box;
            }
        }
        .main{
            height: 240px;
            background: @white;
            box-shadow: @border;
            padding: 24px;
            box-sizing: border-box;
            margin-bottom: 23px;
            .price{
                .newPrice::before{
                    content: "￥";
                    font-size: 24px;
                    vertical-align: top;
                    line-height: 50px;
                }
                .newPrice{
                    font-size: 50px;
                }
                .oldPrice{
                    color: @66;
                    font-size: 28px;
                    text-decoration:line-through;
                    margin-left: 20px;
                }
            }
            .title{
                font-size: 32px;
                text-align: justify;
                text-indent: 1em;
            }
            .freight{
                color: @66;
                line-height: 60px;
                font-size: 25px;
            }
        }
        .discountpage{
            height: 315px;
            background-color: @white;
            box-shadow: @border;
            padding: 30px 24px;
            margin-bottom: 30px;
            .title{
                display: inline-block;
                font-size: 30px;
                width: 100px;
                color: @66;

            }
            .subtitle{
                font-size: 30px;
                i{
                    font-style: normal;
                    color: @pink;
                }

            }
            .link{
                font-size: 30px;
                float: right;
                color: @66;
            }
            .coupon{
                margin:25px 0px; 
                .couponTitle{
                    display: inline-block;
                    color: @pink;
                    background: @pink1;
                    padding: 8px 20px;
                    font-size: 30px;
                    border-radius: 29px;
                    margin-right: 20px;

                }
                .content::before{
                    content: "";
                    position: absolute;
                    display: inline-block;
                    left: -10px;
                    top:19px;
                    width: 20px;
                    height: 20px;
                    background: @white;
                    border-radius: 50%;
                }
                .content::after{
                    content: "";
                    position: absolute;
                    display: inline-block;
                    right:-10px;
                    top:19px;
                    width: 20px;
                    height: 20px;
                    background: @white;
                    border-radius: 50%;
                }
                .content{
                    display: inline-block;
                    position: relative;
                    color: @pink;
                    background: @pink1;
                    padding: 8px 20px;
                    font-size: 30px;
                    margin-right: 20px;
                }
            }
            .promotion{
                padding-bottom: 15px;
                border-bottom: 1PX solid @cc;
                .subtitle{
                    width: 70%;
                    display: inline-block;
                    position: relative;            
                    span{
                        display: inline-block;
                        color: @pink;
                        background: @pink1;
                        border-radius: 29px;
                        padding: 8px 20px;
                    }
                    div{
                        position: absolute;
                        display: inline-block;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                        width: 70%;
                        padding: 8px 20px;
                    }
                }
                .link{
                    line-height: 58px;
                }
            }
            .information{
                padding:40px 0px;
                display: flex;
                >div{
                    flex-grow: 1;
                    position: relative;
                    div{
                        display: inline-block;
                        background: url("../assets/checkbox.png");
                        background-size: 100%;
                        background-position: top;
                        width: 28px;
                        height: 28px;   
                        position: absolute;
                        top:5px;
                        left:5px;
                    }
                    span{
                        display: inline-block;
                        font-size: 30px;
                        margin-left: 35px;

                    }
                }
            }
        }
        .comment{
            background: @white;
            padding: 24px;
            box-shadow: @border;
            .title{
                display: flex;
                margin-bottom: 10px;
                >div:first-child{
                    font-size: 32px;
                    flex-grow: 1;
                    color: @66;
                }
                >div:last-child{
                    font-size: 32px;
                    flex-grow: 1;
                    color: @66;
                    text-align: right;
                }
            }
            .statistics{
                span{
                    display:inline-block;
                    color: @pink;
                    background: @pink1;
                    padding: 10px 15px;
                    font-size: 28px;
                    margin:8px 20px 8px 0px;;
                }
            }

        }
    }
}
</style>
